<template>
  <div class="bar-bg">
    <h6>{{title}}</h6>
    <div ref="canvasRef" class="canvas" :style="{ height: height }" />
  </div>
</template>

<script>
import { defineComponent, ref, reactive, watch, onMounted, computed, onBeforeUnmount, markRaw } from "vue";
import * as echarts from 'echarts';
import { getSvcFlow } from '@/api/statistics'
export default defineComponent({
  name: "BarChart",
  props: {
    title: {
      type: String,
      default: '应用统计'
    },
    height: {
      type: String,
      default: '300px'
    },
     xAxisData: { // 地区code
      type: Array,
      default: () => []
    },
    series1Name: {
      type: String,
      default: '应用总数'
    },
    series2Name: {
      type: String,
      default: '新增应用数'
    },
    chartData: { 
      type: Array,
      default: () => []
    },
    chart2Data: {
      type: Array,
      default: () => []
    },
    multi: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const canvasRef = ref(null)
    const myChart = ref(null);
    const option = computed(() => {
      const series1 = {
        name: props.series1Name,
        data: props.chartData,
        type: 'bar',
        barWidth: '12px',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2E69EB'
            },
            {
              offset: 1,
              color: '#2798FF'
            }
          ]),
          borderRadius: 6,
        }
      }
      const series2 = {
        name: props.series2Name,
        data:  props.chart2Data,
        type: 'bar',
        barWidth: '10px',
        barGap: '30%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#FFA400'
            },
            {
              offset: 1,
              color: '#FFD692'
            }
          ]),
          borderRadius: 6
        }
      }
      const series = props.multi ? [series1, series2] : [series1]
      console.log(series)
      return {
        grid: {
          top: 60,
          left: '0',
          right: 10,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          showContent: true,
          axisPointer: {
            show: true,
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          top: 10,
          right: 0,
          show: props.multi,
          icon: 'circle',
          itemWidth: 8,
					itemHeight: 8,
          data: [props.series1Name, props.series2Name]
        },
        xAxis: {
          type: 'category',
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
            lineStyle: {
              color: '#2E69EB',
              cap: 'round',

            },
          },
          data: props.xAxisData,
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 20
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 2,
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: '#DBDEE6',
            },
          },
        },
        series
      };
    });

    const init = () => {
      if (myChart.value) {
        myChart.value.clear()
      } else {
        myChart.value = markRaw(echarts.init(canvasRef.value)); // 解决弹出框不显示的问题
      }
    }
    watch(() => props.chartData, (value) => {
      init()
      myChart.value.setOption(option.value);
    });
    onBeforeUnmount(() => {
      myChart.value && myChart.value.dispose()
    })
    onMounted(() => {
      init()
    });

    return {
      canvasRef
    };
  },
});
</script>


<style lang="scss" scoped>

.bar-bg {
  position:relative;
}
h6 {
  position: absolute;
  top: 0;
  color: #3C475D;
  font-size: 14px;
  margin: 20px 0;
  margin-top: 10px;
  z-index: 2;
}
</style>